<!-- 
  普通的script标签：
    浏览器解析html，遇到script之后会立刻去下载该资源（这时解析工作是暂停了的），下载完成立刻执行该资源，执行完成再去解析剩余的html
  
  带有 async 的 script 标签：
    浏览器解析html，遇到script之后会异步的去下载该资源（这时解析工作还在继续），下载完成之后会立刻执行该资源，执行完成之后可能还有html没有解析完继续解析

  带有 defer 的 script 标签：
    浏览器解析html，遇到script之后会异步的去下载该资源（这时解析工作还在继续），下载完成之后不会立刻执行该资源，而是需要等待html解析完成才会去执行该资源。

  link标签上的 prefetch 与 preload
    prefetch 预请求，当浏览器空闲的时间，可以提前加载该标记的资源，等到后续要使用的时候可以快速的响应。
    preload 预加载，我很急，碰到的话，需要立刻去加载。
 -->

<template>
  <div>
    <h1>App</h1>
    <p>{{ $store.state.count }}</p>
    <p>count: {{ count }}</p>
    <p>msg: {{ msg }}</p>

    <p>doubleCount: {{ $store.getters.doubleCount }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <p>countPlus: {{ countPlus }}</p>
    <hr />
    <Hello />
  </div>
</template>

<script>
// 从 vuex 中导出辅助函数
import { mapState, mapGetters } from "vuex";
import Hello from "./components/Hello.vue";
export default {
  components: {
    Hello,
  },
  // computed: {
  //   count() {
  //     return this.$store.state.count;
  //   },
  //   doubleCount() {
  //     return this.$store.getters.doubleCount;
  //   }
  // },

  // computed: mapState(["count", "msg"]),
  //   上面一行代码写法没问题,但是会让当前组件无法编写属于自己的计算属性,于是可以改写成下面的样子
  computed: {
    ...mapState(["count", "msg"]),
    ...mapGetters(["doubleCount", "countPlus"]),
    selfHello() {
      return "ssss";
    },
  },
  created() {
    // store实例对象上有两个属性和两个方法
    //  - state         仓库中的state数据
    //  - getters       仓库中的getters数据
    //  - commit()      提交突变的一个函数
    //  - dispatch()    派发动作的一个函数
    console.log(this.$store);
  },
};
</script>
